<template>
	<view class="date_box">
		<view @click="timeFrame(1)" class="date_item" :class="time_type == 1 ? 'date_item_click': ''">
			三天内
		</view>
		<view @click="timeFrame(2)" class="date_item" :class="time_type == 2 ? 'date_item_click': ''">
			七天内
		</view>
		<view @click="timeFrame(3)" class="date_item" :class="time_type == 3 ? 'date_item_click': ''">
			一个月
		</view>
		<view @click="timeFrame(4)" class="date_item" :class="time_type == 4 ? 'date_item_click': ''">
			自定义
		</view>
		<template>
			<u-calendar :show="showDatePicker" mode="range" @confirm="datePickerConfirm" minDate="2023-01-01"
				:maxDate="today" :defaultDate="[today,today]" monthNum="36" :allowSameDay="true"
				:closeOnClickOverlay="true" @close="showDatePicker = false" :round="5" :color="PUBLIC_STYLE.color"></u-calendar>
		</template>
	</view>
</template>

<script>
	import {getDate} from '@/utils/date.js'
	export default{
		data(){
			return{
				start_time:'',
				end_time:'',
				
				time_type:0,
				showDatePicker:false,
				
				today:''
			}
		},
		created() {
			this.today = getDate()
		},
		methods:{
			timeFrame(time_type){
				this.time_type = time_type
				if(time_type == 4){
					this.showDatePicker = true
					return
				}
				this.$emit('setTimeFrame' , {
					time_type,
					start_time:'',
					end_time:'',
				})
			},
			datePickerConfirm(e) {
				console.log(e,'uview时间选择')
				this.start_time = e[0]
				this.end_time = e[e.length - 1]
				this.showDatePicker = false
				this.$emit('setTimeFrame' , {
					time_type:this.time_type,
					start_time:this.start_time,
					end_time:this.end_time,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.date_box{
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		
	}
	
	.date_item{
		border-radius: 10rpx;
		padding: 6rpx 30rpx;
		width: 21%;
		margin: 0 2%;
		box-sizing: border-box;
		border: 2rpx solid transparent;
		background-color: #f0f0f0;
		font-size: 24rpx;
		text-align: center;
	}
	
	.date_item_click{
		transition: all 0.3s;
		border-color: $theme-color;
		color: $theme-color;
		background-color: #fff;
	}
</style>